<template>
  <div class="h-screen flex justify-center items-center">
    <div id="divplay"></div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import { reactive, computed, ComputedRef, ref, watchEffect, inject, nextTick } from "vue";
import rrwebPlayer from "rrweb-player";
import { getMark } from "@/utils/api";
import "rrweb-player/dist/style.css";
const route = useRoute();
const message = inject<any>("message");

const mark = ref([]);
const getData = async () => {
  const res = await getMark({ bd_no: route.query.bd_no });
  if (res.code == 1) {
    mark.value = res.msg.mark;
    message.success("正在加载~");
    new rrwebPlayer({
      target: document.getElementById("divplay") as any,
      props: { events: mark.value },
    });
  } else {
    message.warning(res.msg);
  }
};
getData();
</script>
